<div class="page-title">
  <h2><?php echo $page_title; ?></h2>
</div>

<form action="<?php echo $_SERVER[ 'PHP_SELF' ] ?>" method="post" >

  <div class="grid50"><div class="rad">
    <table class="grids">
      <thead>
        <tr>
          <th colspan="2">PILIH REGION DAN CLUSTER</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Region</td>
          <td>
            <select name="regions" id="regions">
              <option value=""></option>
              <?php 
                foreach ($regions as $key) {
                  echo '<option value="'.$key->territory_id.'">'.$key->territory_name.'</option>';
                }
              ?>
            </select>
          </td>
        </tr>
        <tr>
          <td>Cluster</td>
          <td>
            <select name="clusters" id="clusters">
              <!-- Di sini akan diappend data cluster yang diget menggunakan AJAX -->
            </select>
          </td>
        </tr>
        <tr>
          <td>Kategori Outlet</td>
          <td>
            <select name="program" id="program">
              <?php 
                foreach ($categories as $key) {
                  echo '<option value="'.$key->program_id.'">'.$key->caption.'</option>'."\n\r";
                  // echo '<option value="'.$key->lookup_value.'">'.$key->lookup_desc.'</option>';
                }
              ?>
            </select>
          </td>
        </tr>
        <tr>
          <td>ID/Nama Outlet</td>
          <td><input type="text" size="45" id="keyword" name="keyword" placeholder="ID Outlet / Nama Outlet" ></td>
        </tr>
        <tr>
          <td></td>
          <td><button id="load_outlet" >Tampilkan</button></td>
        </tr>
      </tbody>
    </table>
  </div></div>

  <div class="grid50"><div class="rad">
  <table class="grids" id="category">
    <thead>
      <tr>
        <th width="30px">#</th>
        <th>ID Outlet</th>
        <th>Nama Outlet</th>
        <th>SFA/SGA</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <!-- Di sini akan diappend data outlet yang diget menggunakan AJAX -->
    </tbody>
    <tfoot id="simpan">
      <tr>
        <td colspan="5">
          <button>Simpan</button>
        </td>
      </tr>
    </tfoot>
  </table>
</div></div>
</form>


<script type="text/javascript">
  $(document).ready(function(){
    $('tfoot#simpan').hide();
    $('select#regions').change(function() {
      $('select#clusters').empty();
      $('table#category > tbody').empty();

      if($(this).val() != '') {
        $.post(
          '<?php echo base_url();?>index.php/outlet/get_cluster/',
          {region_id: $(this).val()},
          function(data) {
            var datax = jQuery.parseJSON(data);
            $.each(datax, function(k, v) {
              $('select#clusters').append('<option value="'+v.territory_id+'">'+v.territory_name+'</option>');
            });
          }
        )
      }
    });

    $('select').change(function(){
      $('table#category > tbody').empty();
    }); 
    // ========================================================================
    
    $('button#load_outlet').click(function(event){
      event.preventDefault();
      $('table#category > tbody').empty();
      var cluster_id = $('select#clusters').val();
      var keyword    = $('input#keyword').val();

      if(cluster_id == '' || keyword == ' ' || keyword == '') {
        alert('Semua field harus diisi');
      }
      else if ( keyword.length < 5 ){
        alert('ID Outlet / Nama Outlet yang input terlalu pendek')
      }
      else{
        $('tfoot#simpan').hide();
        $.post(
          '<?php echo base_url();?>index.php/outlet/load_outlet/',
          {cluster_id:cluster_id, keyword:keyword},
          function(data) {
            var datax = jQuery.parseJSON(data);
            if(datax.length == 0 ) {
              alert('Outlet tidak ditemukan');
            }
            else {
              var x = 1;
              $.each(datax, function(k,v) {
                // var trx = "<tr>"+
                //           "<td>"+x+"</td>"+
                //           "<td>"+v.outlet_id+"</td>"+
                //           "<td>"+v.territory_name+"</td>"+
                //           "<td>"+v.user_id+" | "+v.user_name+"</td>"+
                //           "<td><input type='checkbox' name='categories' value='"+v.outlet_id+"_"+v.territory_id+"' onclick='simpan("+"'"+v.outlet_id+"_"+v.territory_id+"'"+")' ></td>"+
                //           "</tr>";
                var trx = '<tr>'+
                          '<td>'+x+'</td>'+
                          '<td>'+v.outlet_id+'</td>'+
                          '<td>'+v.territory_name+'</td>'+
                          '<td>'+v.user_id+" | "+v.user_name+'</td>'+
                          // '<td><input type="checkbox" name="categories[]" value="'+v.outlet_id+'_'+v.territory_id+'" onclick="simpan('+'\''+v.outlet_id+"_"+v.territory_id+'\''+')" ></td>'+
                          '<td><input type="checkbox" name="categories[]" value="'+v.outlet_id+'_'+v.territory_id+'" ></td>'+
                          '</tr>';
                $('table#category').append(trx);
                x++;
              });
              $('tfoot#simpan').show();
            }
          }
        );
      }
    });
  });

</script>